<template>
  <div class="modle infomation" v-show="show">
    <div class="tit"><b>公告</b></div>
    <p class="info">1.字数限制为45</p>
    <div class="content flex-btw" style="position: relative;">
      <img class="icon" src="@/assets/images/info.png" />
      <el-input
        v-model="infomationInfo"
        type="textarea"
        :rows="2"
        placeholder="请输入……"
        class="word"
      >
      </el-input>
      <div class="wordLimit"><span :style="{color:infomationInfo.length>45?'red':''}">{{ infomationInfo.length }}</span>/45</div>
    </div>
    <div class="flex-center">
      <div class="submit flex-center" @click="submit()">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "infomation",
  props: ["show"],
  data() {
    return {
      infomationInfo: "",
    };
  },
  created() {},
  methods: {
    // 父组件传来的数据
    getData(data) {
      this.infomationInfo = data;
    },
    // 提交
    submit() {
      if(this.infomationInfo.length>45){
        this.$message.error("字数不能超过45")
        return
      }
      // 在父组件提交
      this.$emit("submit");
    },
  },
};
</script>

<style lang="scss" scoped>
.infomation {
  width: 500px;
  .wordLimit{
    position: absolute;
    right: 18px;
    bottom: 17px;
  }
  .content {
    margin-top: 14px;
    background: #fff;
    padding: 12px 6px 12px 15px;
    .icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
    .input {
      flex: 1;
      height: 72px;
      border: 1px solid #bcbec0;
      border-radius: 4px;
      padding: 0 15px;
    }
    .flex-btw {
      align-items: flex-start;
    }
  }
}
</style>